<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生报修系统</title>
    <link rel="stylesheet" type="text/css" href="../../resource/myResource/css/login/component.css" />
    <link rel="stylesheet" type="text/css" href="../../resource/myResource/css/login/demo.css" />
    <link rel="icon" href="../../resource/myResource/img/bitbug_favicon.ico">
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="../../resource/myResource/css/login/component.css" />
    <link rel="stylesheet" type="text/css" href="../../resource/layui/css/layui.css" />
<style type="text/css">
</style>
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <!-- <canvas id="demo-canvas"></canvas> -->
            <div class="logo_box" style="background:rgba(255,255,255,0.3);">
                <h3 style="color:#646464;margin-bottom:45px">欢迎使用学生报修后台</h3>
                <form action="#" name="f" method="post">
                    <div class="input_outer">
                        <i class="layui-icon layui-icon-username" style="font-size:30px;margin-left:15px;color:#666666"></i>   
                        <input name="username" class="text" style="color: #000 !important ;margin-left:15px" type="text" placeholder="请输入账户" autocomplete="off">
                    </div>
                    <div class="input_outer" style="margin-top:15px">	
                        <i class="layui-icon layui-icon-password" style="font-size:30px;margin-left:15px;color:#666666"></i>   
                        <input name="password" class="text" style="color: #000 !important; position:absolute; z-index:100;margin-left:15px; width:50%"value="" type="password" placeholder="请输入密码">
                    </div>
                    <div class="input_outer" style="margin-top:15px;width: 60%">	
                        <i class="layui-icon layui-icon-vercode" style="font-size:30px;margin-left:15px;color:#666666"></i>   
                        <input id="valicode" name="password111" class="text" style="color: #000 !important; position:absolute; z-index:100;margin-left:15px;width: 50%;"value="" type="text" placeholder="请输入验证码">
                        <img id="verifyCode" style="color: #000  !important; position:absolute; z-index:100; margin-left: 90%" onclick="reloadCode()">
                    </div>
                    <div class="mb2"><a id = "sub" lay-filter="sub" class="act-but submit" href="javascript:;" style="color: #FFFFFF;margin-top:10px">登录</a></div>
                </form>
            </div>
        </div>
    </div>
</div><!-- /container -->
<script type="text/javascript" src="../../resource/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../resource/layui/layui.js"></script>
<script src="../..//resource/myResource/js/base.js"></script>
<script src="../../resource/myResource/js/util/dictionary.js"></script>
<script src="../../resource/md5/md5.js"></script>
</body>
<script>
    var id = getId();
    if(id != -1){
        window.location = "../main.html";
    }
</script>
<script>
    //初始化页面的高
    var height;
    height = window.innerHeight;
    largeHeader = document.getElementById('large-header');
    largeHeader.style.height = height+'px';
    
    //加载弹出层组件
    layui.use('layer',function(){

        var layer = layui.layer;

        //登录的点击事件
        $("#sub").on("click",function(){
            validateCode();
        })
        //监听回车
        $("body").keydown(function(){
            if(event.keyCode == "13"){
                validateCode();
            }
        })

        //登录函数
        function login(i){
            var username = $(" input[ name='username' ] ").val();
            var password = $(" input[ name='password' ] ").val();
            password = hex_md5(password);
            // alert(password);
            $.ajax({
                url:head + "/user/login",
                data:{"iden":username,"password":password,"type":1},
                type:"post",
                dataType:"json",
                success:function(data){
                    // debugger;
                    if(data.code == 0){ 
                        window.location = "../main.html";
                    }else{
                        layer.close(i);
                        layer.msg(data.msg);
                        reloadCode();
                    }
                }
            })
        }
        function validateCode(){
            layui.use(['form', 'layedit', 'laydate'], function(){
                var i = layer.load(2);
                var valicode = $("#valicode").val();
                $.ajax({
                    url:head + "/verify/validCode?code="+valicode,
                    type:"GET",
                    dataType:"json",
                    success:function(redata){
                        if(redata.code == 0){
                            login(i);
                        }else{
                            layer.msg(redata.msg);
                            layer.close(i);
                            reloadCode();
                        }
                    }
                });
            });
           
        }
    })
    
</script>
 <script type="text/javascript">
    $("#verifyCode").attr("src",head+"/verify/getVerifyCode")
    function reloadCode(){
      $("#verifyCode").attr("src",head+"/verify/getVerifyCode?id="+Math.random()); 
    }

    </script>
</html>